<template>
	<view>
		<view class="top"></view>
		<view class="bottom">
			<!-- 内容 -->
			<view class="content">
				<view class="step">
					<view class="step-item active">
						<view class="step-circle">
							<text class="step-text">服务</text>
						</view>
					</view>
					<view class="step-line"></view>
					<view class="step-item">
						<view class="step-circle">
							<text class="step-text">支付</text>
							<text class="step-text">订单</text>
						</view>
					</view>
					<view class="step-line"></view>
					<view class="step-item">
						<view class="step-circle">
							<text class="step-text">门店</text>
							<text class="step-text">服务</text>
						</view>
					</view>
				</view>
				
				<view class="user-info">
					<uni-list-item title="伟业汽车美容店" note="山阳区人民中路33号" 
						thumb="/static/店铺.png"
						thumb-size="base"  />
					<uni-list-item title="张先生"  rightText="18686894566"
						thumb="/static/用户.png"
						thumb-size="base" clickable @click="call" />
					<uni-list-item 
					  :title="`${carInfo.brand}${carInfo.model}/${carInfo.plateNumber}`" 
					  showArrow
					  thumb="/static/汽车.png" thumb-size="base"  clickable   @click="goToChooseVehicle"/>
				</view>
				
				<view class="service-product">
					<view class="product-title">
						<view class="title-name">服务产品</view>
						<view class="product-num">共选择<text>1项</text>服务产品</view>
					</view>
					<view class="product-item">
						<uni-list-item title="精洗" :border="false"/>
						<view class="price">￥{{ originalPrice.toFixed(2) }}</view> <!-- 显示原价，保留2位小数 -->
					</view>
				</view>
				
				<view class="coupon">
					<uni-list-item 
					  :title="couponInfo.name" 
					  :rightText="`-${couponInfo.discount}元`"  
					  showArrow
					  thumb="/static/代金券.png"
					  thumb-size="sm" 
					  clickable  
					  @click="goToChooseCoupon"  
					/>
				</view>

				<!-- 新增：显示实付价格（可选，让用户明确看到优惠后价格） -->
				<view class="pay-summary">
					<view class="summary-label">实付金额：</view>
					<view class="summary-price">￥{{ payPrice.toFixed(2) }}</view>
				</view>
			</view>
			
			<!-- 提交订单：已修改为动态计算的实付价格 -->
			<view class="submitorder">
				<van-submit-bar 
					:price="payPrice * 100" 
					button-text="提交订单" 
					@submit="onSubmit" 
					custom-class="submit-bar-custom"
				>
					<view class="contact-area" @click="showContactModal">
					  <image class="contact-icon" src="/static/car_wash/客服@2x.png" mode="aspectFit"></image>
					  <text class="contact-text">联系客服</text>
					</view>
				</van-submit-bar>
			</view>
			
			<!-- 支付密码弹窗：已修改为动态金额 -->
			<uni-popup ref="payPopup" type="center" background-color="rgba(0,0,0,0.5)">
				<view class="pay-popup" :class="{ 'keyboard-active': showKeyboard }">
					<view class="close-btn" @click="closePayPopup">×</view>
					<view class="pay-title">请输入支付密码</view>
					<view class="service-platform">车辆服务平台</view>
					<view class="pay-amount">¥ {{ payPrice.toFixed(2) }}</view> <!-- 动态显示实付价 -->
					<view class="pay-method">
						<text class="method-label">支付方式</text>
						<text class="method-value">零钱 ></text>
					</view>
					<view class="password-container">
						<van-password-input
						  :value="password"
						  :length="6"
						  :focused="showKeyboard"
						  @focus="showKeyboard = true"
						/>
					</view>
					<view class="pay-confirm-btn" @click="confirmPayment">
						确定支付
					</view>
				</view>
			</uni-popup>
			
			<!-- 数字键盘 -->
			<van-number-keyboard
			  :show="showKeyboard"
			  @blur="showKeyboard = false"
			  @input="onInput"
			  @delete="onDelete"
			/>

		</view>
		
		<!-- 联系客服弹出层 -->
		<view class="contact-modal" v-show="isShowContact">
		  <view class="modal-mask" @click="closeModal"></view>
		  <view class="modal-content">
		    <view class="phone-number" @click="makePhoneCall">18642589456</view>
		    <view class="divider"></view>
		    <button class="copy-btn" @click="copyPhone">复制</button>
		    <view class="divider"></view>
		    <button class="cancel-btn" @click="closeModal">取消</button>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				minDate:new Date(),
				maxDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000),
				currentDate: new Date(),
				showKeyboard: false,
				password: '',
				isShowContact: false, 
				customerPhone: "18642589456",
				// 汽车信息
				carInfo: {
					brand: "奔驰",    
					model: "E300",   
					plateNumber: "沪AZR666"
				},
				// 代金券信息
				couponInfo: {
					id: 1,           
					name: "通用代金券",
					discount: 10,    // 优惠金额（元）
					isSelected: true
				},
				// 价格相关（已整合计算逻辑）
				originalPrice: 39.9, // 服务原价（元）
				payPrice: 39.9       // 实付价格（初始值=原价，加载后自动计算）
			}
		},
		// 页面显示时自动计算价格（包括初始加载、选择优惠券返回）
		onShow() {
			this.calculatePayPrice();
			// 原有城市选择逻辑保留
			const selectedCity = uni.getStorageSync('selectedCity');
			if (selectedCity) {
				this.userLocation.address = selectedCity.address;
				this.userLocation.latitude = selectedCity.latitude;
				this.userLocation.longitude = selectedCity.longitude;
				uni.removeStorageSync('selectedCity');
			}
		},
		methods: {
			// 新增：核心价格计算方法（服务价 - 优惠券价）
			calculatePayPrice() {
				// 实付价=原价-优惠金额，最低为0元（避免负数）
				this.payPrice = Math.max(this.originalPrice - this.couponInfo.discount, 0);
			},

			// 跳转到选择汽车页面
			goToChooseVehicle() {
				uni.navigateTo({
					url: "/pages/car_wash/choosecar/choosecar",
					success: () => console.log("跳转至选择汽车页面"),
					fail: (err) => {
						console.error("选择汽车页面跳转失败：", err);
						uni.showToast({ title: "跳转失败", icon: "none" });
					}
				});
			},

			// 跳转到选择优惠券页面
			goToChooseCoupon() {
				uni.navigateTo({
					url: "/pages/car_wash/coupon/coupon",
					success: () => console.log("跳转至选择优惠券页面"),
					fail: (err) => {
						console.error("选择优惠券页面跳转失败：", err);
						uni.showToast({ title: "跳转失败", icon: "none" });
					}
				});
			},

			// 客服相关方法
			showContactModal() {
				console.log('点击了客服');
				this.isShowContact = true;
			},
			copyPhone() {
				uni.setClipboardData({
					data: this.customerPhone,
					success: () => {
						uni.showToast({ title: "复制成功" });
						this.closeModal();
					}
				});
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.customerPhone,
					success: () => this.closeModal()
				});
			},
			closeModal() {
				this.isShowContact = false;
			},

			// 原有方法保留
			call() {
				uni.makePhoneCall({ phoneNumber: '18686894566' });
			},
			onSubmit(){
				this.password = '';
				this.$refs.payPopup.open('center');
			},
			onInput(key){
				if (this.password.length >= 6) return;
				this.password = (this.password + key).slice(0,6);
				if (this.password.length === 6) {
					this.showKeyboard = false;
				}
			},
			onDelete(){
				if (this.password.length > 0) {
					this.password = this.password.slice(0, -1);
				}
			},
			closePayPopup(){
				this.$refs.payPopup.close();
				this.showKeyboard = false;
			},
			confirmPayment(){
				if (this.password.length !== 6) {
					uni.showToast({ title: '请输入6位支付密码', icon: 'none' });
					return;
				}
				this.handlePayConfirm();
			},
		handlePayConfirm() {
		  this.$refs.payPopup.close(); // 关闭支付弹窗
		  this.showKeyboard = false;  // 关闭数字键盘
		  uni.showToast({ 
		    title: '支付成功', 
		    icon: 'success', 
		    duration: 1500  // 提示显示1.5秒
		  });
		  
		  // 延迟1500毫秒（等提示消失后）跳转到支付成功页面
		  setTimeout(() => {
		    uni.navigateTo({
		      url: '/pages/car_wash/pay/pay' // 目标页面路径
		    });
		  }, 1500);
		}
		}
	}
</script>

<style scoped>
	/* 原有样式保留，新增实付金额显示样式 */
	.top{
		height: 25vh;
		background-color: #1f73f1;
	}
	.bottom{
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 75vh;
	}
	.content{
		background-color: #ffffff;
		border-radius: 25rpx;
		transform: translateY(-350rpx);
		padding-bottom: 40rpx; /* 给新增的实付金额留空间 */
	}
	/* 步骤样式 */
	.step {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;
		padding: 40rpx;
	}
	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.step-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #cccccc;
		position: relative;
		z-index: 2;
	}
	.step-text {
		font-size: 24rpx;
		color: white;
		font-weight: bold;
		line-height: 1.2;
	}
	.step-item:nth-child(1) .step-circle {
		background: linear-gradient(135deg, #4A90E2, #357ABD);
	}
	.step-item:nth-child(3) .step-circle {
		background: linear-gradient(135deg, #50C878, #228B22);
	}
	.step-item:nth-child(5) .step-circle {
		background: linear-gradient(135deg, #FF6B35, #E55100);
	}
	.step-line {
		flex: 1;
		height: 4rpx;
		background-color: #e0e0e0;
		margin: 0 20rpx;
		position: relative;
		z-index: 1;
	}
	.step-item.active ~ .step-line {
		background-color: #4A90E2;
	}

	/* 提交栏样式 */
	.submitorder {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	::v-deep .submit-bar-custom {
		padding-left: 20rpx;
	}
	.contact-area {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}
	.contact-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.contact-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 服务产品样式 */
	.product-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
	.price {
		color: #FF6B35;
		font-size: 32rpx;
		font-weight: bold;
	}
	.product-title{
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		margin-bottom: 25rpx;
	}
	.product-num text{
		color: #4A90E2;
	}
	.title-name{
		font-weight: bold;
		font-size: 35rpx;
		margin-left: 40rpx;
	}
	.user-info{
		border-bottom: 1rpx solid #e9e9eb;
		padding-bottom: 20rpx;
	}
	.coupon{
		margin-top: 25rpx;
		padding: 0 30rpx;
	}
	/* 新增：实付金额显示样式 */
	.pay-summary{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.summary-label{
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	.summary-price{
		font-size: 36rpx;
		color: #FF4444;
		font-weight: bold;
	}

	::v-deep .uni-list-item__content-title{
		font-size: 30rpx;
	}
	::v-deep .uni-list-item__extra-text{
		font-size: 28rpx;
	}

	/* 支付密码弹窗样式 */
	.pay-popup {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 600rpx;
		position: relative;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
	}
	.pay-popup.keyboard-active {
		transform: translateY(-200rpx);
	}
	.close-btn {
		position: absolute;
		top: 20rpx;
		left: 30rpx;
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pay-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.service-platform {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.pay-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.pay-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 40rpx;
	}
	.method-label {
		font-size: 28rpx;
		color: #333;
	}
	.method-value {
		font-size: 28rpx;
		color: #666;
	}
	.password-container {
		padding: 20rpx 0;
	}
	.pay-confirm-btn {
		background-color: #1f73f1;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 12rpx;
		margin-top: 30rpx;
		transition: all 0.3s ease;
	}
	.pay-confirm-btn:active {
		background-color: #1a5cc7;
		transform: scale(0.98);
	}

	/* 联系客服弹出层 */
	.contact-modal {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.modal-content {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 0;
		box-sizing: border-box;
		transition: transform 0.3s ease;
		transform: translateY(0);
	}
	.contact-modal[v-show="false"] .modal-content {
		transform: translateY(100%);
	}
	.phone-number {
		font-size: 32rpx;
		text-align: center;
		padding: 30rpx 0;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}
	.divider {
		height: 1rpx;
		background-color: #eee;
	}
	.copy-btn,
	.cancel-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border: none;
		border-radius: 0;
		font-size: 30rpx;
		text-align: center;
	}
	.copy-btn {
		background-color: #fff;
		color: #333;
	}
	.cancel-btn {
		background-color: #f5f5f5;
		color: #333;
	}
</style>